<template>
  <div>
    <van-nav-bar
      title="购物车"

      :fixed="true"
      left-arrow
      @click-left="onClickLeft"

    />
    <div class="container">
      <van-checkbox-group class="card-goods" v-model="checkedGoods">
        <van-checkbox class="card-goods__item" v-for="item in list" :key="item.id" :name="item.id" icon-size="15px">
          <van-card class="card"
            :title="item.game.title"
            :desc="item.game.brief"
            :price="item.game.price"
            :thumb="item.game.image"
          >
            <div slot="footer" :pid="item.id">
              <van-button size="mini" class="delbtn" @click.stop="delbtn(item.id)">删除</van-button>
            </div>

          </van-card>
          <van-divider />
        </van-checkbox>

      </van-checkbox-group>

      <van-submit-bar
        :price="totalPrice*100"
        :disabled="!checkedGoods.length"
        :button-text="submitBarText"
        @submit="onSubmit()"
      />
    </div>
  </div>
</template>

<script>
import api from "../api/api_pro";
export default {

inject: ['reload'],

  name: "Cart",
  data() {
    return {
      value: "",
      title: "购物车",
      list: [],
      checkedGoods: [],
      msgprice:'',
      token: JSON.parse(localStorage.getItem("access-user")),

    };
  },

  mounted() {
    this.$emit("toparent", this.title);

    let token = JSON.parse(localStorage.getItem("access-user"));

    console.log(token.data.id);

    let params = {

      u_id: this.token.data.id,

    };
    api.cartList(params).then(res => {
      console.log(res.data)
      res.data.map(v => {
        this.checkedGoods.push(v.id);
      });
      this.list = res.data;
    });
    // 发送总价到兄弟组件submit中

  },
  methods: {
    onClickLeft() {
      this.$router.push('/home')
    },
    delbtn(id){
      console.log(id);
        let params={
            id:id
        }
        api.deleteShopcar(params).then(res=>{
            console.log(res);
            this.reload();
            this.$toast("删除成功");
            // location.reload
        })
    },
    onSubmit(){
      // this.$router.push('/submit')
      this.$store.dispatch('onSubmit',this.msgprice)
    }

  },
  computed: {
    submitBarText() {
      const count = this.checkedGoods.length;

      return "结算" + (count ? `(${count})` : "");
    },

    totalPrice() {

      let totalPrice = this.list.reduce(
        (total, item) =>
          total +
          (this.checkedGoods.indexOf(item.id) !== -1
            ? (item.game.price - 0)
            : 0),0
      );
      console.log(totalPrice);
      //this.msgprice=totalPrice;
      return totalPrice
    }

  }
};
</script>

<style scoped>
.delbtn{
    position: absolute;
    right: 5px;
    bottom: -3px;
}

.card{
    margin:0;
    padding: 0;
    width: 310px;
}
.van-card__title {
    margin-top: 9% !important;
    max-height: 0.888889rem;
    font-weight: 500;
    line-height: 0.444444rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card-goods {
  padding: 10px 0;

  background-color: #fff;
}
.van-checkbox__label {
  width: 100%;

  height: auto;

  padding: 0 10px 0 15px;

  box-sizing: border-box;
}
.van-checkbox__icon .van-icon {
    display: block;
    margin-left: 10px !important;
    margin-top: -15px !important;
    box-sizing: border-box;
    width: 1.25em;
    height: 1.25em;
    color: transparent;
    font-size: .8em;
    line-height: inherit;
    text-align: center;
    border: 0.027778rem solid #e5e5e5;
    -webkit-transition: .2s;
    transition: .2s;
}
.van-card__price {
  color: #f44;
}
</style>
